<template>
  <div class="login">
    <h2>登录</h2>
    <ul class="loginbox">
      <li>
        <label class="loginicon">
          <img src="../assets/img/login_phone.jpg"/>
        </label>
        <input type="text" v-model.trim="phone" placeholder="请输入手机号"/>
      </li>
      <li>
        <label class="loginicon">
          <img src="../assets/img/login_lock.jpg"/>
        </label>
        <input maxlength="4" type="text" v-model.trim="phoneCode" style="width:68%" placeholder="请输入验证码"/>
        <div @click="getcode" class="phonecode"><span>{{timerText}}</span></div>
      </li>
      <li class="libtn">
        <button @click="login">用户登录</button>
      </li>
    </ul>
    {{errorText}}
    <div class="showxy">*登录即同意<a target="_blank" :href="xyUrl">平台服务协议</a></div>
  </div>
</template>

<script>
  import {XIEYI_URL} from '@/constants'

  export default {
    name: 'login',
    data () {
      return {
        timer: 60,
        timerText: '获取验证码',
        codeSending: true,
        phone: '',
        phoneCode: '',
        xyUrl: '',
        errorText: '',
        appKey:'',
        return_url:'',
        data:'',
      }
    },
    created () {
      // this.appKey=this.$route.query.appKey || '';
      // this.return_url=this.$route.query.return_url || '';
      // this.data=this.$route.query.data || '';
      this.getxieyi()


    },
    methods: {
      /**
       * 优才管家平台服务协议
       */
      getxieyi () {
        this.xyUrl = '/static/fwxy.pdf';
        /*this.request.post('mapi/getContractByName', {name: '优才管家平台服务协议'}).then(res => {
          debugger
          this.xyUrl = XIEYI_URL + res.data
        })*/
      },
      goxieyi () {
        this.$router.push({
          path: '/authPerson',
          query: {
            funCode: 'xieyi'
          }
        })
      },
      /**
       * 找回账号
       * @returns {boolean}
       */
      goforget () {
        this.$router.push({
          path: '/authPerson',
          query: {
            funCode: 'forgetPas',
            setp: 1
          }
        })
      },
      /**
       * 用户登录
       * @returns {boolean}
       */
      login () {
        if (!this.phone) {
          // this.$toast('请输入手机号')
            alert('请输入手机号')
          return false
        }
        if (!this.$options.filters.isphone(this.phone)) {
          // this.$toast('请输入正确的手机号')
          alert('请输入正确的手机号')
          return false
        }
        if (!this.phoneCode) {
          // this.$toast('请输入验证码')
          alert('请输入验证码')
          return false
        }
        this.request.post('newemployee/phoneVerify', {
          phone: this.phone,
          code: this.phoneCode
        }).then(res => {
          if (res.code === 0) {
              // localStorage.setItem('is_auth', res.is_auth)
              localStorage.setItem('myphone', this.phone)
              this.appKey=res.data.appKey;
              this.data=res.data.data;
              this.$router.push({
                  path: '/authPerson',
                  query: {
                      funCode: 'renzheng',
                      appKey:this.appKey,
                      data:encodeURIComponent(this.data),
                      // return_url:this.return_url,
                  }
              })
          } else {
            alert(res.msg)
          }

        }, error => {
          alert('登录失败,请联系客服')
        })
      },
      /**
       * 发送验证码
       * @returns {boolean}
       */
      getcode () {
        if (!this.$options.filters.isphone(this.phone)) {
          alert('请输入正确的手机号')
          return false
        }
        if (!this.codeSending) {
          console.log('请勿重复')
          return false
        }
        this.codeSending = false
        this.request.post('newemployee/sendCode', {
          phone: this.phone
        }).then(info => {
          if (info.code === 0) {
            this.timerText = this.timer + 'S'
            let t = setInterval(() => {
              if (this.timer === 0) {
                this.timerText = '获取验证码'
                this.codeSending = true
                this.timer = 60
                clearInterval(t)
              } else {
                this.timer--
                this.timerText = this.timer + 'S'
              }
            }, 1000)
          } else {
            this.codeSending = true
            alert(info.msg)
          }
        }, error => {
          this.codeSending = true
          alert('短信验证码发送失败，请重试')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

  body{background: #fff;height:100%;}
  .showxy {
    position: absolute;bottom:0px;
    width: 100%;
    color: #666;
    left: 0;
    padding:30px 0;
    text-align: center;
    font-size:12px;

    a {
      color: #409EFF;
    }

  }

  .findpas {
    text-align: center;
    color: #666;
    font-size:14px;
  }

  .loginicon {
    width:34px;

    img {
      width: 100%;
    }
  }

  .login {
    max-width:800px;
    margin:0 auto;
    background: #fff;
    position: fixed;
    top:0;left: 0;width: 100%;height:100%;
    h2{margin:0;font-weight: 500;padding:70px 0 0 30px;}
    .loginb {
      img {
        width: 100%;
      }
    }

    .loginbox {
      padding: 20px;
      background: #FFF;
      margin:0;
      padding-top:0;
      li {
        margin: 30px 20px;
        padding: 10px;
        border-bottom: 1px solid #eee;

        input[type='text'] {
          width: 100%;
          border: none;
          outline: none;
        }

        display: flex;

        .phonecode {
          width: 32%;
          line-height: 200%;

          span {
            display: block;
            text-align: center;
            color: #409EFF;
            font-size:12px;
          }
        }

      }

      .libtn {
        border: none;

        button {
          padding:10px 0;
          border-radius: 100px;
          border: none;
          background: #409EFF;
          color: #FFF;
          font-size: 35px;
          box-shadow: 0 10px 20px rgba(102, 177, 255, .3);
          width: 100%;
          font-size:18px;
        }
      }
    }
  }
  @media screen and (min-width:768px){
    .showxy {position: static;}
    .login{position: static;height:100%;}
  }
</style>
